<template>
	<view class="box">
		<view class="data">
			<!-- 体重数据 -->
			<view class="tzhistory" v-if="id == 1">
				<view class="introduce"><image src="../../../static/img/headFeature/member/dailyMonitoring/tzIcon.png"></image> 标准体重是反映和衡量一个人健康状况的重要标志之一。过胖和过瘦都不利于健康，也不会给人以健美感。不同体型的大量统计材料表明，反映正常体重较理想和简单的指标，可用身高体重的关系来表示。</view>
				<view class="TzhistoryData">
					<view class="wightContent" v-for="(item,index) in Result" :key="index">
						<view class="writeTime">{{item.singDate}}</view>
						<view class="weightData">
							<text>{{item.data[0].value}}CM</text><text>{{item.data[1].value}}KG</text><text>{{item.data[1].value ? (item.data[1].value / Math.pow((item.data[0].value /100),2)).toFixed(2) : 0}}MI</text>
						</view>
					</view>
				
				</view>
			</view>

			
			<div class="bloodPressure" v-if="id == 2">
				<div class="bloodPressure_data">
					<p class="describe"> <image src="@/static/img/headFeature/member/dailyMonitoring/bloodPressureIcon@2x.png"></image> 正常的血压范围：<br/>高压在90到140mmHg，低压在60到90mmHg<br/>对于高血压的诊断，不能单纯的凭一次的数值来进行判断，一定要在非同日同一时间进行测量，选取三次的平均值来作为参考依据。</p>
					<div class="history">
						<div class="historyData" v-for="(item,index) in Result" :key="index">
							<p class="time">{{item.singDate}}</p>
							<div class="data">
								<p>收缩压<span>{{item.data[0].value}}</span></p>
								<p>舒张压<span>{{item.data[1].value}}</span></p>
							</div>
						</div>
					</div>
				</div>
			</div>

			<!-- 血糖数据 -->
			<view class="bloodPressure" v-if="id == 3">
				<view class="bloodPressure_data">
					<p class="describe"> <image src="@/static/img/headFeature/member/dailyMonitoring/bloodIcon@2x.png"></image>血糖正常值是指人空腹的时候血糖值在3.9～6.1毫摩尔/升，血糖值对于治疗疾病和观察疾病都有着指导意义。日常饮食和控制血糖有着重要的关系，如果不能合理的安排日常饮食也许就会导致血糖升高。</p>
					<view class="history xtHistory">
						<view class="bloodGlucose" v-for="(item,index) in Result" :key="index">
							<p class="time">{{item.singDate}}</p>
							<view class="data data_bloodGlucose">
								<p>血糖值<span>{{item.data[0].value}}</span></p>
								<p><span>{{item.data[1].value}}</span></p>
								<p><span>{{item.data[2].value}}</span></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			  <!-- 心率数据 -->
			<view class="bloodPressure" v-if="id == 5">
				<view class="bloodPressure_data">
					<p class="describe"> <image src="@/static/img/headFeature/member/dailyMonitoring/heartRateIcon@2x.png" alt="">心率是指正常人安静状态下每分钟心跳的次数，可因年龄、性别或其他生理因素产生个体差异。一般来说，年龄越小，心率越快，老年人心跳比年轻人慢，女性的心率比同龄男性快，这些都是正常的生理现象。</p>
					<view class="history">
						<view class="heartRate" v-for="(item,index) in Result" :key="index">
							<p class="time">{{item.singDate}}</p>
							<view class="data data_heartRate">
								<p>心率值<span>{{item.data[0].value}}次/分钟</span></p>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 睡眠数据 -->
			<view class="bloodPressure" v-if="id == 6">
				<view class="bloodPressure_data">
					<p class="describe"> <image src="@/static/img/headFeature/member/dailyMonitoring/sleepIcon@2x.png" alt="">睡眠时间可分为间断睡眠和连续睡眠，一般生活中所指的睡眠时间是指一天内总的睡眠时间，即所有处于睡眠状态的时间总和。人体生物钟建议晚上22点前入睡，早上7点前起床。早睡早起，增强免疫力，有利于抗击病毒的侵入，从而提高工作效率</p>
					<view class="history">
						<view class="sleep" v-for="(item,index) in Result" :key="index">
							<p class="time">{{item.singDate}}</p>
							<view class="data data_sleep">
								<view class="sleepTime">
									<p>起：{{filterData(item.data[0].value)}}</p>
									<p>终：{{filterData(item.data[1].value)}}</p>
								</view>
								<span>{{item.toDay}}</span>
							</view>
						</view>
					</view>
				</view>
			</view>
			 <!-- 尿酸数据 -->
			<view class="bloodPressure" v-if="id == 4">
				<view class="bloodPressure_data">
					<p class="describe"> <image src="@/static/img/headFeature/member/dailyMonitoring/purineTrioneIcon@2x.png" alt="">血尿酸正常值：<br>成人男性为149～416μmol/L ；女性为89～357μmol/L。年龄大于60岁的男性为：250～476μmol/L； 女性为：190～434μmol/L。<br>尿酸是嘌呤代谢的终产物。为三氧基嘌呤，其醇式呈弱酸性。高尿酸易引发痛风等综合症，适当调理尿酸处于正常水平很是重要。</p>
					<view class="history nsHistory">
						<view class="purineTrione" v-for="(item,index) in Result" :key="index">
							<p class="time">{{item.singDate}}</p>
							<view class="data data_purineTrione">
								<p>尿酸值<span>{{item.data[0].value}}</span></p>
								<p class="medication">{{item.data[1].value}}</p>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 运动数据 -->
			<view class="bloodPressure" v-if="id == 7">
				<view class="bloodPressure_data">
					<p class="describe"> <image src="@/static/img/headFeature/member/dailyMonitoring/exerciseIcon@2x.png" alt="">随着大家对健康认识的提高，运动健身已被大多数人所接受。科学运动是指在科学理论（包括运动人体科学、生物学、医学、心理学和运动处方）的指导下，根据自身健康情况进行的能够提高自身生理机能和素质，增进健康的身体活动。科学运动可以更快地达到运动效果、提高机体免疫力、促进新陈代谢等。</p>
					<view class="history ydHistory">
						<view class="historyData" v-for="(item,index) in Result" :key="index">
							<p class="time">{{item.singDate}}</p>
							<view class="data data_excrise">
								<p><span>{{item.data[1].value}}</span></p>
								<p class="ydType">{{item.data[0].value}}</p>                         
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import {getUrlParam,filterData} from "@/static/js/filter.js"
	export default {
		data() {
			return {
				Result: [],
				id: '',
				userId: '',
			}
		},
		onShow() {
			this.id = getUrlParam('id');
			
			if(this.id == 2) {
				uni.setNavigationBarTitle({
					title: '血压数据'
				})
			} else if(this.id == 3) {
				uni.setNavigationBarTitle({
					title: '血糖数据'
				})
			} else if(this.id == 5) {
				uni.setNavigationBarTitle({
					title: '心率数据'
				})
			} else if(this.id == 6) {
				uni.setNavigationBarTitle({
					title: '睡眠数据'
				})
			} else if(this.id == 4) {
				uni.setNavigationBarTitle({
					title: '尿酸数据'
				})
			} else if(this.id == 7) {
				uni.setNavigationBarTitle({
					title: '运动数据'
				})
			}
			
			this.userId = getUrlParam('userId');
			this.$api.userMonitorDetile(this.id,this.userId).then((res) => {
				if(res.data.returnCode == '200') {
				     this.Result = res.data.result.map((a) => {
				           return {singDate:a.singDate,data:JSON.parse(a.parameterValues)}
				      }) || [];
				}
			})
		},
		methods:{
			filterData
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		min-width: 100vw;
		min-height: 100vh;
		background: #F8F8F8;
		overflow: hidden;
		.data {
			.tzhistory {
				.introduce {
					position: fixed;
					top: 0;
					left: 0;
					z-index: 100;
					color: #333333;
					font-size: 26upx;
					line-height: 40upx;
					background-color: #FFFFFF;
					padding: 36upx 24upx;
					margin: 88upx 3% 0;
					border-radius: 10upx;
					image {
						position: absolute;
						left: -2px;
						top: -1px;
						width: 40upx;
						height: 40upx;
					}
				}
				.history {margin-bottom: 24upx;margin-top: 258upx;}
				.TzhistoryData {
					margin-top: 260upx;
					.wightContent {
						background-color: #FFFFFF;
						padding: 0 24upx;
						margin: 24upx 3% 0;
						border-left: 3px solid #43C6A5;
						border-radius: 10upx;
						.writeTime {
							height: 69upx;
							line-height: 69upx;
							color: #333333;
							font-size: 26upx;
							border-bottom: 1upx solid #EEEEEE;
						}
						.weightData {
							display: flex;
							align-items: center;
							text {
								flex: 1;
								text-align: center;
								color: #38CB97;
								font-size: 32upx;
								padding: 43upx 0;
							}
						}
					}
				}
			}
			.bloodPressure {margin: 0 3%;width: 94%;}
			.describe{background-color: #FFFFFF;color: #333333;font-size: 28upx;padding: 42upx 30upx 36upx;border-radius: 1vw;position: fixed; top:88upx; left: 0;margin: 0 3%;}
			.describe image {width: 40upx;height: 40upx;position: absolute;left: -2px;top: -1px;}
			.history{margin-top: 296upx;}
			.xtHistory {margin-top: 258upx;}
			.ydHistory{margin-top: 332upx;}
			.nsHistory {margin-top:374upx;}
			.historyData,.bloodGlucose,.heartRate,.sleep,.purineTrione {background-color: #FFFFFF;margin-top: 24upx; border-left: 3px solid #A270FF; padding: 0 2.6vw;border-radius: 1vw;}
			.bloodGlucose{border-left: 3px solid #D29A52;}
			.heartRate {border-left: 3px solid #58A1D9;}
			.sleep {border-left: 3px solid #E98148;}
			.purineTrione {border-left: 3px solid #E54C82;}
			.historyData .time,.sleep .time,.purineTrione .time,
			.bloodGlucose .time,.heartRate .time{font-size: 28upx; color: #333; border-bottom: 1px solid #EEEEEE; height: 60upx; line-height: 60upx;}
			.data {display: flex; padding: 33upx 0; align-items: center;}
			.data p {flex: 1;font-size: 26upx;color: #333333;}
			.data_bloodGlucose p,.data_heartRate p,.data_purineTrione p,.data_excrise p {text-align: center;}
			.data p span {font-size: 4.5vw;color: #A270FF;}
			.data_bloodGlucose p span {color: #D29A52;}
			.data_heartRate p span {color: #58A1D9;}
			.data_purineTrione p span {color:#E54C82;}
			.data_sleep .sleepTime {flex: 1;}
			.data_sleep .sleepTime p:nth-child(2) {margin-top: 6upx;}
			.data_sleep span {color: #E98148;font-size: 4.8vw;}
			.data_excrise .ydType {font-weight: 600;font-size: 4.8vw;color: #A270FF;}
			.data_purineTrione .medication {color:#E54C82;font-weight: 600;font-size: 4vw;}
		}
	}

</style>
